<template>
<div class="ban">
    <myconten></myconten>
    <div class="dy">
      <div v-for="(item, key) in comingArr" :key="key" class="dy-box">
        <p class="dy-tlt">{{ key }}</p>
        <ul class="dy-con">
          <li v-for="i in item" :key="i.id" class="con-li">
            <img :src="i.img" />
            <div class="li-cont">
              <div class="dy-nm">{{ i.nm }}</div>
              <div class="dy-xk"><span>{{ i.wish }}</span>人想看</div>
              <div class="dy-zy">主演：{{ i.star}}</div>
              <div class="dy-sy">{{ i.showInfo }}</div>
            </div>
            <div class="dy-fot" v-if="i.showStateButton">
              <span class="dy-btn" :style="{background:i.showStateButton.color}">{{i.showStateButton.content}}</span>
            </div>
             <div class="dy-fot" v-else>
              <span class="dy-btn" :style="{background:'#faaf00'}">想看</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import axios from "axios";
import Myconten from '../../components/myconten.vue';
// import mybanner from "../../components/mybanner.vue"
// import myconten from '../../components/myconten.vue';
export default {
  components: {Myconten },
  name: "daiying",
  data() {
    return {
      movieArr: [],
      comingArr: [],
    };
  },
  mounted() {
    axios.get("daiying.json").then((rel) => {
      console.log(rel);
      //图片w.h会报错，修改
      rel.data.coming.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
      });
      this.movieArr = rel.data.coming;
    });

    axios.get("daiying02.json").then((rel) => {
      console.log(rel);
      let comingArr = rel.data.coming;
      let coming = {};
      //一维数组转二维数组
      comingArr.forEach((item) => {
        item.img = item.img.replace("w.h", "128.180");
        if (coming[item.comingTitle]) {
          coming[item.comingTitle].push(item);
        } else {
          coming[item.comingTitle] = [];
          coming[item.comingTitle].push(item);
        }
      });
      this.comingArr = coming;
      console.log(this.comingArr);
    });

    let swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style scoped>
@import "../../../node_modules/swiper/swiper.min.css";
.swiper-slide{
  width:85px !important;
  margin-right:0 !important;

}
.swiper-slide img {
  display: block;
  width: 85px;
  height: 115px;
  object-fit: cover;
}

.dy {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-top: 230px;
}
ul,
li {
  list-style: none;
}
.dy .dy-box {
  width: 100%;
  margin-bottom: 10px;
}
.dy .dy-box img {
  width: 64px;
  height: 90px;
}
.dy-tlt {
  padding: 0 0 0 10px;
  font-size: .37333333333333335rem;
  color: #333;
}
.dy ul{
  width:95%;
  margin: 0 auto;
}
.con-li{
  display: flex;
  padding: 10px 0 10px 0;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.li-cont{
  width:100%;
  padding-left:10px;
}
.li-cont .dy-nm{
  font-size: 18px;
  font-weight: bold;
}
.li-cont .dy-xk{
  padding-top:5px;
}
.li-cont .dy-xk,.li-cont .dy-zy,.li-cont .dy-sy{
  font-size:14px;
  color:#666;
  padding-top:2px;
}
.li-cont .dy-xk span{
  color:#faaf00;
  font-weight: bold;
}
.dy-fot{
  width:30%;
}
.dy-btn{
  display: block;
  width:60px;
  height:30px;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  color:#fff;
  margin-top:30px;
  font-size: 14px;
}
</style>